<template>
	<div class="foodkind">
		<!--顶部搜索框-->
		<div class="foodkind_head">
			<div class="foodkind_head_content">
				<!-- logo图片 -->
				<div class="fhc_logo">
					<img src="../../assets/logo.png" height="100px" width="100px">
				</div>
				<!-- 搜索框与热词 -->
				<div class="fhc_search">
					<!-- 搜索框 点击搜索跳转到食品分类并搜索-->
					<div class="fhc_searchinput">
						<el-input v-model="food_name" placeholder="请输入内容" class="input-with-select">
							<el-button slot="append" icon="el-icon-search" @click="searchClick()"></el-button>
						</el-input>
					</div>
					<div class="fhc_searchhot">
						<span>热门搜索：</span>
						<span @click="foodClick(31)">冷吃兔</span>
						<span @click="foodClick(32)">水煮肉片</span>
					</div>
				</div>
			</div>
		</div>
		<!--下方内容-->
		<div class="foodkind_content">
			<div class="foodkind_content_ball">
				<!--菜品列表-->
				<div class="fcb_list">
					<categoryList ref="kl" @f_back="searchbykind" @all_back="searchallfood"></categoryList>
				</div>
				<div class="fcb_con">
					<!--全部菜品-->
					<div class="fcb_conu">
						<div class="food" v-for="food of foodlist">
							<div @click="foodClick(food.food_id)" class="imgdiv">
								<!-- 图片240*240 -->
								<img :src="`http://localhost:8080/res/${food.food_img}`">
							</div>
							<div class="hr">
								<!-- 横线上下各10 -->
							</div>
							<div class="namediv" v-text="food.food_name">
								<!-- 菜品名称 -->
							</div>
							<div class="paydiv">
								<div class="price-box">
									<span>价格:</span>
									<span class="numfont">{{food.food_price}}</span>
									<span>￥</span>
								</div>
								<div @click="carClick(food.food_id,food.food_name,food.food_price)"><i class="iconfont icongouwu1" style="font-size: 25px;"></i></div>
							</div>
						</div>
					</div>
					<!--分页-->
					<div class="fcb_condown">
						<div class="page">
							<el-pagination background :hide-on-single-page="true" layout="prev, pager, next" :total="total" :page-size="pageSize"
							 :current-page="pageNum" @current-change="changepage">
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--加入购物车弹出框-->
		<el-dialog title="加入购物车" :visible.sync="dialogFormVisible" width="600px" center>
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item>
					{{form.clickfoodname}}
				</el-form-item>
				<el-form-item style="margin-top: 20px" label="辣度" prop="label">
					<el-radio-group v-model="form.radio1" size="medium">
						<el-radio-button label="微辣"></el-radio-button>
						<el-radio-button label="特辣"></el-radio-button>
						<el-radio-button label="不辣"></el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item style="margin-top: 20px" label="甜度" prop="label">
					<el-radio-group v-model="form.radio2" size="medium">
						<el-radio-button label="多糖"></el-radio-button>
						<el-radio-button label="少糖"></el-radio-button>
						<el-radio-button label="正常"></el-radio-button>
					</el-radio-group>
				</el-form-item>
				<!--添加数量-->
				<el-form-item label="数量">
					<el-input-number v-model="form.num" :min="1" :max="10" label="数量">
					</el-input-number>
				</el-form-item>
			</el-form>
			<!--添加和取消按钮-->
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addfood">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import categoryList from "@/components/CategoryList/CategoryList.vue";
	import FoodCategoryService from "./FoodCategoryService";
	export default {
		name: "FoodCategory",
		components: {
			categoryList
		},
		data() {
			return {
				food_name: '',
				food_kind_id:null,
				searchmethod: '',
				foodlist: [],
				pageNum: 1,
				pageSize: 6,
				total: 0,
				dialogFormVisible: false,
				form: {
					clickfoodname: '',
					clickfoodid: '',
					clickfooodprice: '',
					radio1: '不辣',
					radio2: '正常',
					num: 1
				}
			}
		},
		methods: {
		  //搜索方法
			searchFood(){
        console.log(`搜索ing：名称：${this.food_name}分类：${this.food_kind_id}当前页：${this.pageNum}页大小：${this.pageSize}`)
        FoodCategoryService.searchFoodService({
          food_name:this.food_name,
          food_kind_id:this.food_kind_id,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
			  },r=>{
          this.foodlist = r.foodList.list;
          this.total = r.foodList.total;
			  })
			},
			//点击搜索按钮
      searchClick(){
				this.pageNum=1;
				this.searchFood();
      },
			//点击菜品图片
      foodClick(foodid) {
        this.$router.push({
          name: 'FoodDetail',
          params: {
            foodid: foodid
          }
        });
      },
			//页数改变
      changepage(currentpage) {
        this.pageNum=currentpage;
        this.searchFood();
      },
			//点击购物车
			carClick(foodid, foodname, foodprice) {
				//console.log(foodid,foodname,foodprice);
				this.dialogFormVisible = true;
				this.form.clickfoodname = foodname;
				this.form.clickfoodid = foodid;
				this.form.clickfooodprice = foodprice;
			},
			//购物车明细
			addfood() {
				this.dialogFormVisible = false;
				FoodCategoryService.addshoppingcartdetail({
					food_id: this.form.clickfoodid,
					food_amount: this.form.num,
					total_cost: this.form.clickfooodprice * this.form.num,
					detail_attach: `${this.form.radio1}${this.form.radio2}`
				}, r => {
					console.log(r.data);
				})
			},
      searchallfood(){
			  this.pageNum=1;
			  this.food_kind_id=null;
			  this.searchFood();
      },
      searchbykind(kindid){
				this.pageNum=1;
				this.food_kind_id=kindid;
				this.searchFood();
      }
		},
		mounted() {
			this.searchmethod = this.$route.params.searchmethod;
			if (this.searchmethod == 'byname') {
				//根据搜索跳转过来
				this.food_name = this.$route.params.value;
			} else if (this.searchmethod == 'bykind') {
				//根据分类跳转过来
				this.food_kind_id=this.$route.params.value
			}
			this.searchFood();
		}
	}
</script>





<style lang="less" scoped>
	@import "../../style/Common.less";

	.foodkind {
		width: 100%;

		display: flex;
		flex-direction: column;

		.foodkind_head {
			flex: 1;
			height: 140px;
			width: cal(100% - 2px);
			background-color: #fdeaea;
			border: 1px solid #f5e2e2;
			box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
			border-radius: 4px;

			//头部容器
			.foodkind_head_content {
				width: 1200px;
				display: flex;
				margin: 0 auto;

				.fhc_logo {
					margin: 20px 20px 20px 60px;
					height: 100px;
					width: 100px;
				}

				.fhc_search {
					position: relative;
					top: 48px;
					left: 100px;
					width: 700px;

					.fhc_searchinput {}

					.fhc_searchhot {
						position: relative;
						top: 8px;

						>span {
							margin-right: 5px;
							font-size: 16px;
							font-family: FangSong;

							&:hover {
								cursor: pointer;
								color: orangered;
							}
						}
					}
				}
			}
		}


		.foodkind_content {
			flex: 5;
			width: 1200px;
			margin: 0 auto;

			//background-color: lightcoral;
			//内容容器
			.foodkind_content_ball {
				display: flex;
				margin-top: 20px;

				.fcb_list {
					flex: 1;
				}

				.fcb_con {
					flex: 5;
					width: 100%;
					background-color: #fff;
					box-sizing: border-box;
					border: 1px solid #f5e2e2;

					.fcb_conu {
						flex-wrap: wrap;
						margin-bottom: 10px;
						display: flex;
					}

					//分页
					.fcb_condown {
						//background-color: lightblue;
						display: flex;
						margin: 20px 0;
						.page {
							align-items: center;
							margin: 0 auto;
						}
					}

				}
			}



		}
	}

	.kinddiv {
		align-items: center;
		margin: 0 auto;
	}

	#seldivparent {
		height: 100px;
		display: flex;
	}

	.seldiv {
		width: 80%;
		margin: auto;
	}

	#words {
		height: 20px;
		text-align: left;
		margin-left: 10px;
		margin-top: 10px;
	}


	//推荐菜品卡片

	.food {
		width: 270px;
		height: 270px;
		margin: 30px 0px 0px 25px;
		border-radius: 4px;
		padding: 15px 15px 0;

		//background-color: #8d6aff;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);

		&:hover {
			background-color: #fdf4f4;
			cursor: pointer;
			transition: background-color 500ms;
		}
	}

	.hr {
		border-bottom: 1px solid #e6e6e6;
		height: 0;
		margin: 2px 5px;
	}

	.namediv {
		margin: 10px 20px;
		font-size: 18px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.imgdiv {
		width: 100%;
		height: 190px;

		>img {
			width: 100%;
			height: 100%;
		}
	}

	.price-box {
		color: #ff6600;
	}

	.numfont {
		font-size: 21px;
		letter-spacing: -0.5px;
	}

	.paydiv {
		display: flex;
		justify-content: space-between;
		margin: 0 20px 20px;
	}
</style>
